<template>
  <div class="GdwyyAppindicatorDetails wrapper">
    <div class="block" @click.stop>
      <div v-if="type === 'zl_fz'" class="dev-type-group">
        <div
          :class="['dev-type-item', devType === item.model && 'active']"
          :title="item.title || ''"
          v-for="(item, index) in zlFzTabConfig"
          :key="index"
          @click="handleChangeTab(item.model)"
        >
          <span class="item-text">{{ item.label }}：</span>
          <span class="item-value">{{ zlFzTabData[item.model] || 0 }}</span>
        </div>
      </div>

      <van-loading v-if="loading" type="spinner" color="#1989fa" />

      <a-table
        v-else
        :columns="tableColumns"
        :data-source="tableData"
        :bordered="true"
        :pagination="pagination"
        size="small"
        :scroll="{ x: 300, y: 500 }"
        @change="handleTableChange"
      >
        <span slot="xuhao" slot-scope="text, record, rowIndex">
          {{ rowIndex + 1 }}
        </span>
        <span slot="chnlGridName" slot-scope="text, record">
          <span :style="{ color: record.CHNL_GRID_CODE != queryParams.gridId ? '#F00' : '' }">{{
            text == 'NULL' ? '未匹配到营服' : text
          }}</span>
        </span>
      </a-table>
    </div>
  </div>
</template>
  
  <script>
import { _thirdDetailDialogTableColumnsConfig } from '../../common'
import { postAction } from '@api/manage'
import { showZwtNav } from '@/utils/showNav.js'

export default {
  name: 'GdwyyAppindicatorDetails',

  data() {
    return {
      showPopup: false,
      loading: false,
      tableData: [],
      pagination: {
        position: 'bottom',
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      url: '',
      clickType: 'normal',
      queryParams: {},
      devType: 'DEV_GRID',
      type: '',
      zlFzTabData: {},
      zlFzTabConfig: [
        {
          label: '本营服总发展量',
          model: 'DEV_GRID',
          title: '本营服总发展量 = 本营服人员给本营服的发展量 + 别的营服人员给本营服的发展量',
        },
        {
          label: '本营服人员给本营服的发展量',
          model: 'DEV_GRID_STAFF',
        },
        {
          label: '别的营服人员给本营服的发展量',
          model: 'DEV_GRID_OTHER',
        },
        {
          label: '本营服人员给其他营服的发展量',
          model: 'DEV_STAFF_OTHER',
        },
      ],
      tabUrl: '',
    }
  },

  computed: {
    tableColumns() {
      return _thirdDetailDialogTableColumnsConfig[this.clickType]
    },
  },

  created() {
    const { url, queryParams, type, tabUrl } = this.$route.query
    this.queryParams = JSON.parse(queryParams)
    const { kpiCode } = this.queryParams
    this.clickType = ['YW', 'KD', 'ZJ', 'JF'].find((item) => kpiCode.indexOf(item) > -1)
    let title = '指标发展详情'
    this.clickType === 'JF' && (title = '交付工单明细')
    document.title = title
    showZwtNav(title)
    this.url = url
    this.tabUrl = tabUrl
    this.type = type
    tabUrl && this.getZlFzTabData()
    this.openDialog()
  },

  methods: {
    async getZlFzTabData() {
      this.zlFzTabData = {}
      // const res = await postAction('/Sql2ApiCall/call/2c3a07178ba92724018c4777e129003e', {
      //   ...this.queryParams,
      //   pageNum: Number(this.pagination.current),
      //   pageSize: Number(this.pagination.pageSize),
      // })
      const res = await postAction('/Sql2ApiCall/call/' + this.tabUrl, {
        ...this.queryParams,
        pageNum: Number(this.pagination.current),
        pageSize: Number(this.pagination.pageSize),
      })
      if (res.success) {
        const resultdata = JSON.parse(res.result) || {}
        this.zlFzTabData = resultdata.data[0] || {}
      }
    },
    openDialog() {
      this.getTableData()
      this.pagination.current = 1
      this.pagination.total = 0
      this.showPopup = true
    },
    async getTableData() {
      this.tableData = []
      this.loading = true
      const params = {
        ...this.queryParams,
        chnIType: Number(this.queryParams.chnIType),
        pageNum: Number(this.pagination.current),
        pageSize: Number(this.pagination.pageSize),
        devType: this.devType,
      }

      const res = await postAction('/Sql2ApiCall/call/' + this.url, params)
      if (res.success) {
        let resultjson = JSON.parse(res.result)
        let resultdata = resultjson.data
        this.tableData = resultdata.list
        this.pagination.current = resultdata.pageNum || 1
        this.pagination.total = resultdata.total
      } else {
        this.pagination.current = 0
        this.pagination.total = 0
      }
      this.loading = false
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.getTableData()
    },
    handleChangeTab(type) {
      if (this.devType == type) return
      this.devType = type
      this.getTableData()
    },
  },
}
</script>
  
  <style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.dev-type-group {
  display: flex;
  margin: 15px 0;
  overflow: auto;

  .dev-type-item {
    padding: 2px 10px 2px 6px;
    border-radius: 4px;
    border: 1px solid #1890ff;
    margin-right: 6px;
    color: #1890ff;
    flex-shrink: 0;

    .item-text::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 4px;
      background: #1890ff;
      margin-right: 6px;
      margin-bottom: 2px;
    }
    &:hover,
    &.active {
      border-color: #1890ff;
      background: #1890ff;
      color: #fff;
      box-shadow: 0 0 6px #c0e0ff;

      .item-text::before {
        background: #fff;
      }
    }
  }
}
.wrapper {
  height: 100vh;
  background: #fff;
}

.block {
  width: 100%;
  box-sizing: border-box;
  max-height: 100%;
  padding: 2.6667vw;
  background-color: #fff;
}
.mgb {
  margin-bottom: 6.4vw;
}
.GdwyyAppindicatorDetails {
  ::v-deep {
    .ant-pagination-options {
      display: inline-block !important;
    }
  }
}
</style>